<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 最简单的html标签 + js  百度功能
        抖动 三缸机器
        易用
     -->
    <input type="text" id="undebounce"
     autofocus placeholder="请输入您要搜素的内容" />
     <button id="btn">btn</button>
     <button id="cancel">取消搜素事件的绑定</button>


     <script>
         window.onload = function() {
             const input = document.querySelector('#undebounce');
            const cancel = document.getElementById('cancel');
            const btn = document.getElementById('btn');
            const consoleOne = () =>{ console.log('one'); }
            const consoleTwo = () =>{ console.log('two'); }
            const consoleThree = () =>{ console.log('three'); }

            btn.addEventListener('click',consoleOne)
            btn.addEventListener('click',consoleTwo)
            btn.addEventListener('click',consoleThree)

            /*
             * @ func 搜素功能
             * @ params  (content: string) 关键字
             * @ return 返回结果列表
             */
            function doInput(event){
                let keyword = event.target.value;
                ajax(keyword);
            }
             function ajax(content){
                 console.log('准备实时搜素'+content);
             }

             input.addEventListener('input',doInput)
            //  input.addEventListener('input',(event)=>{
            //      let keyword = event.target.value;
            //      // 能封装就封装  解耦
            //      // 如果流程性性代码超过10行，一定封装
            //     //  搜素比较复杂 封装能力
            //     // 应该放在外面
            //     ajax(keyword);
            //     //  console.log(keyword);
            //  })
             input.addEventListener('keydown',function(event){
                 if(event.keyCode == 13){
                     console.log('搜素吧');
                 }
             })
             // 取消绑定
             cancel.addEventListener('click',function(){
                 input.removeEventListener('input',doInput);
                 btn.removeEventListener('click',consoleOne);
             })
            }
     </script>
</body>
</html>